<template>
  <div class="app">
    <h3>我是app组件(祖) --- {{ name }} {{ price }}</h3>
    <child :msg="msg" school="清华" />
  </div>
</template>

<script>
import { ref, reactive, toRefs, provide } from "vue";
import child from "./components/child.vue";

export default {
  name: "App",
  components: { child },
  setup() {
    let msg = ref('hahah')
    let car = reactive({ name: "奔驰", price: "40W" });
    // 给自己的后代组件传递数据,只要在这里执行了provide,后代子组件都可以通过inject获取数据
    // 父传子props    父传孙provide
    provide("car", car);
    return {
      msg,
      ...toRefs(car),
    };
  },
};
</script>

<style>
.app {
  background-color: #ccc;
  padding: 10px;
}
</style>